import React from "react"
import { NavBar, Icon } from 'antd-mobile';
import {get_song_pinglun} from "../../../api"
import queryString from "query-string"

class Playmusic_pinglun extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      comments:[]
    }
  }

  componentDidMount(){
    console.log(this.props)
    let qr = queryString.parse(this.props.location.search)
    console.log(qr)
    get_song_pinglun(qr.id,100)
    .then(body=>body.json())
    .then(res=>{
      console.log(res);
        this.setState({
          comments:res.hotComments
      })
      console.log(this.state.comments);
    })
  }

  goback(props){
    this.props.history.goBack()
    // console.log(222)
  }

  render(){
    return (
      <div className="Playmusic_pinglun">
        <NavBar
              style={{backGround:'white'}}
              mode="dark"
              icon={<Icon type="left"  onClick={this.goback.bind(this)} style={{width:"30px",height:"30px",zIndex:2}}/>}

            >热门评论
        </NavBar>

        <ul style={{paddingLeft:"10px"}}>
          {this.state.comments.map(item=><li key={item.user.userId} style={{marginBottom:"20px"}}>
            <div>
              <div style={{display:"flex",alignItems:"center"}}>
                <img src={item.user.avatarUrl} alt="" style={{width:"30px",height:"30px"}}/>
                <span>{item.user.nickname}</span>
              </div>
              <span>{item.content}</span>
            </div>
            <div></div>
          </li>)}
        </ul>
      </div>
    )
  }
}

export default Playmusic_pinglun